<template>
  <section class="m-istyle">
    <dl @mouseover="over">
      <dt>有格调</dt>
      <dd
        :class="{active:kind==='all'}"
        kind="all"
        keyword=""
      >
        全部
      </dd>
      <dd
        :class="{active:kind==='part'}"
        kind="part"
        keyword="美食"
      >
        约会聚餐
      </dd>
      <dd
        :class="{active:kind==='spa'}"
        kind="spa"
        keyword="丽人"
      >
        丽人SPA
      </dd>
      <dd
        :class="{active:kind==='movie'}"
        kind="movie"
        keyword="电影演出"
      >
        电影演出
      </dd>
      <dd
        :class="{active:kind==='travel'}"
        kind="travel"
        keyword="旅游"
      >
        品质出游
      </dd>
    </dl>
    <ul class="ibody">
      <li
        v-for="item in cur"
        :key="item.title"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="never"
        >
          <img
            :src="item.img"
            class="image"
          >
          <ul class="cbody">
            <nuxt-link :to="{path:'detail',query:{keyword:item.title,type:item.type}}" class="title">
              {{ item.title }}
            </nuxt-link>
            <li class="pos">
              <span>{{ item.pos }}</span>
            </li>
            <li class="price">
              ￥<em>{{ item.price }}</em><span>/起</span>
            </li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data: () => {
    return {
      kind: 'all',
      list: {
        all: [],
        part: [],
        spa: [],
        movie: [],
        travel: []
      }
    }
  },
  computed: {
    cur: function () {
      return this.list[this.kind]
    }
  },
  mounted() {
    this.getPois('')
  },
  methods: {
    over(e) {
      const dom = e.target
      const tag = dom.tagName.toLowerCase()
      if (tag === 'dd') {
        this.kind = dom.getAttribute('kind')
        const keyword = dom.getAttribute('keyword')
        this.getPois(keyword)
      }
    },
    async getPois(keyword) {
      const self = this
      const { status, data: { count, pois } } = await self.$axios.get('/search/resultsByKeywords', {
        params: {
          keyword,
          city: self.$store.state.geo.position.city
        }
      })
      if (status === 200 && count > 0) {
        const r = pois.filter(item => item.photos.length).map((item) => {
          return {
            title: item.name,
            price: item.biz_ext ? item.biz_ext.cost : '暂无',
            img: item.photos[0],
            url: '//abc.com',
            type: item.type,
            pos: item.type.split(';')[0]
          }
        })
        self.list[self.kind] = r.slice(0, 9)
      } else {
        self.list[self.kind] = []
      }
    }
  }

}
</script>
<style lang="scss">
    @import "@/assets/css/index/artistic.scss";
</style>
